<%--
  Created by IntelliJ IDEA.
  User: yangtao
  Date: 2017/7/12
  Time: 14:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="<%=path%>/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="<%=path %>/plugins/font-awesome/css/font-awesome.min.css" type="text/css"/>
    <script type="text/javascript" src="<%=path %>/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/core/helper.js"></script>
    <script src="<%=path%>/plugins/layui/layui.js"></script>
</head>
<body>
<form id="form" class="layui-form layui-form-pane" action="" style="padding: 10px">
    <table class="layui-table">
        <colgroup>
            <col width="70">
            <col width="200">
            <col>
            <col width="200">
        </colgroup>
        <thead>
        <tr>
            <th>选择</th>
            <th>类型名称&nbsp;&rarr;&nbsp;
                <button type="button" class="layui-btn layui-btn-mini" onclick="addCustomType()">添加类型</button>
            </th>
            <th>分类编码</th>
            <th>描述</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="customTypeList"></tbody>
    </table>
    <div style="float:right;margin-right:1px;" id="customTypePage"></div>
    <button type="button" class="layui-btn" onclick="addCustomTypes()">确定添加</button>
</form>

<script>
    var form;
    layui.use(['form', 'laypage'], function () {
        form = layui.form();
        customTypes.splice(0, customTypes.length);//清空数组
        //监听checkbox
        form.on('checkbox(selectCustomType)', function (data) {
            var index = data.value;
            if (data.elem.checked == true) {
                customTypes.push(modelParam.list[index]);
            } else {
                var j = -1;
                for (var i in customTypes) {
                    if (customTypes[i].custom_type_id == modelParam.list[index].custom_type_id) {
                        j = i;
                        break;
                    }
                }
                if (j != -1) {
                    customTypes.splice(j, 1);
                }
            }
        });
        queryCustomTypeList(1);
    });

    function addCustomType(customTypeId) {
        var param = '';
        if (customTypeId != null && "undefined" != typeof customTypeId) {
            param += '?customTypeId=' + customTypeId + '&type=' + '${type}';
        } else {
            param += '?type=' + '${type}';
        }


        layui.layer.open({
            title: '添加自定义类型',
            type: 2,
            area: ['800px', '600px'],
            fixed: false, //不固定
            maxmin: true,
            content: '<%=path%>/cms/resource/addCustomType.x' + param
        })
    }

    function addCustomTypes() {
        if (customTypes.length > 0) {
            parent.customAddPerms('${type}', customTypes);
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        } else {
            layer.msg('请选择你需要添加的自定义类型', {icon: 5});
        }
    }

    function deleteCustomType(customTypeId) {
        layer.confirm('确定要删除这个自定义分类吗？', {
            btn: ['确定', '取消']
        }, function () {
            var param = {
                customTypeId: customTypeId
            };
            postJson("<%=path%>/cms/resource/deleteCustomType.x", $.param(param), function (data) {
                queryCustomTypeList();
                layer.closeAll();
            });
        });
    }

    var modelParam = {};
    modelParam.pageSize = 10;

    function queryCustomTypeList() {
        var param = {};
        param.pageSize = modelParam.pageSize;
        param.page = 1;
        param.isPage = true;
        param.type = '${type}';

        postJson("<%=path%>/cms/resource/queryCustomTypeList.x", $.param(param), function (data) {
            console.log(data.data.list);
            $('#customTypeList').empty();
            render(data.data.list);
            layui.laypage({
                cont: 'customTypePage'
                , pages: Math.ceil(data.data.size / modelParam.pageSize)
                , jump: function (row, first) {
                    if (!first) {
                        param.page = row.curr;
                        queryPage(param);
                    }
                }
            });
        });
    }

    //列表选择小区
    var customTypes = [];

    function render(list) {
        modelParam.list = list;
        $('#customTypeList').append();
        for (var i in list) {
            var checked = "";
            for (var j in customTypes) {
                if (list[i].custom_type_id == customTypes[j].custom_type_id) {
                    checked = "checked=checked";
                    break;
                }
            }
            $('#customTypeList').append(
                '<tr>' +
                '<td><input type="checkbox" name="selectCustomType" lay-skin="primary" lay-filter="selectCustomType" ' + checked + ' value="' + i + '"/></td>' +
                '<td>' + list[i].custom_type_name + '</td>' +
                '<td>' + list[i].custom_type_code + '</td>' +
                '<td>' + list[i].description + '</td>' +
                '<td>' +
                '<button class="layui-btn layui-btn-small layui-btn-danger" style="margin-left: 20px" onClick="deleteCustomType(\'' + list[i].custom_type_id + '\');return false;">删除</button> ' +
                '<button class="layui-btn layui-btn-small layui-btn-normal" onClick="addCustomType(\'' + list[i].custom_type_id + '\');return false;">编辑</button>' +
                '</td>' +
                '</tr>'
            );
        }
        form.render('checkbox');
    }

    function queryPage(param) {
        postJson("<%=path%>/cms/resource/queryCustomTypeList.x", $.param(param),
            function (data) {
                $('#customTypeList').empty();
                render(data.data.list);
            });
    }
</script>
</body>
</html>
